<template>
  <ElTag :color="result.color" type="info" effect="light">
    <span style="color: #fff;">{{ result.text }}</span>
  </ElTag>
</template>

<script lang="ts" setup name="activityStatus">
import { computed } from 'vue';
import dayjs from 'dayjs';
import { ActivityStatus } from '/@/constants/activity-status';

const props = defineProps({
  status: {
    type: String,
    default: ''
  },
  deadline: {
    type: String,
    default: ''
  }
});

const result = computed(() => {
  const { status, deadline } = props;

  let text = '';
  let color = '';

  if (status === ActivityStatus.OFFLINE) {
    text = '已下架';
    color = '#F56C6C';
  } else if (status === ActivityStatus.COMPLETED) {
    text = '已完成';
    color = '#909399';
  } else if (status === ActivityStatus.ONLINE) {
    if (dayjs().isAfter(deadline)) {
      text = '报名已截至';
      color = '#E6A23C';
    } else {
      text = '进行中';
      color = '#67C23A';
    }
  }

  return { text, color };
});
</script>
